<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login&regiest</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    .bannerCss {
        width: 375px;
        height: 930px;
    }

    #app {
        display: flex;
        flex: left;
    }

    #right {
        width: 100%;
        margin-left: 20px;
        margin-top: 20px;
    }

    #title {
        display: block;
        font-size: x-large;
        float: left;
    }

    #title div {
        line-height: 40px;
        float: right;
    }

    #title img {
        width: 39.9px;
        height: 39.9px;
        margin-right: 8px;
    }

    #nav {
        float: right;
        padding-right: 15px;
    }

    #nav a,#nav span {
        text-decoration: none;
        line-height: 40px;
        color: #9d9a9a;
        font-size: 14px;
        padding: 10px;
    }

    .layoutCard1 {
        width: 450px;
        height: 570px;
        border-radius: 4px;
        box-shadow: 0 20px 50px 0 hsla(0, 0%, 64%, .1);
        margin: 0 auto 0px;
        padding: 0px 45px;
        margin-top: 100px;
    }
    .layoutCard2 {
        width: 450px;
        height: 750px;
        border-radius: 4px;
        box-shadow: 0 20px 50px 0 hsla(0, 0%, 64%, .1);
        margin: 0 auto 0px;
        padding: 0px 45px;
        margin-top: 100px;
    }
    
    #warp {
        width: 64px;
        height: 64px;
        float: right;
        margin-right: -45px;
        /* background-color: orange; */
        background: linear-gradient(to bottom left, rgba(255, 119, 0, 0.665) 50%, rgb(255, 255, 255) 50%);;
    }
    #warp img{
        width: 44px;
        height: 44px;
        padding-top: 6px;
        padding-left: 14px;
    }
    #tabs{
        font-size: x-large;
        margin-top: 45px;
    }
    #tabs span{
        padding-right: 20px;
    }
    .checkTabs{
        color: #AAAAAA;
    }
    .span1{
        width: 50px;
        border-bottom: 5px solid orange;
        border-radius: 5px 5px 5px 5px;
        margin-top: 5px;
    }
    .span2{
        width: 50px;
        border-bottom: 5px solid orange;
        border-radius: 5px 5px 5px 5px;
        margin-top: 5px;
        margin-left: 66px;
    }
    #myform{
        display: flex;
        flex-direction: column;
        margin-top: 50px;
    }
    #myform span input{
        padding: 30px 20px 10px;
        font-size: large;
        background-color: #f5f5f5;
        margin-top: 20px;
        margin-bottom: 40px;
        border: 0px;
        outline-color: orange;
    }
    #myform span{
        margin-top: -40px;
    }
    #myinput input{
        width: 400px;
        line-height: 40px
    }
    #myform button{
        border: 0px;
        padding: 10px 10px 10px;
        line-height: 45px;
        border-radius: 5px;
        color: white;
        background-color: #f6ac82;
        font-size: large;
    }
    #myform div a{
        text-decoration: none;
        color: #f6ac82;
    }
    #myform div a:nth-child(2){
        float: right;
    }
    .otherlogin__title{
        text-align: center;
        color: #AAAAAA;
    }
    #loginlist img{
        margin-top: 20px;
        padding-left: 35px;
        
    }
    .mi-copyright{
        margin-top: 200px;
        text-align: center;
        color: #999999;
    }
    .mi-copyright a{
        text-decoration: none;
        color: #999999;
    }
    #warn{
        display: block;
        color: red;
    }
    #myinput a{
        text-decoration: none;
        position:relative;
        float: right;
        padding-right: 40px;
        margin-top: -90px;
        color: #f6ac82;
    }
</style>

<body>
    <div id="app">
    </div>
    <template id="root">
        <left-content></left-content>
        <right-content></right-content>
    </template>
    <!-- leftContent组件 -->
    <template id="leftContent">
        <div>
            <img src="image/banner.jpg" :class="'bannerCss'">
        </div>
    </template>
    <!-- rightContent组件 -->
    <template id="rightContent">
        <div id="right">
            <div id="header">
                <div id="title">
                    <img src="image/icon-小米归属.png">
                    <div>小米账号</div>
                </div>
                <div id="nav">
                    <a href="/about/protocol/agreement?_locale=zh_CN">用户协议</a>
                    <a href="/about/protocol/privacy?_locale=zh_CN">隐私政策</a>
                    <a href="/helpcenter?_locale=zh_CN">帮助中心</a>
                    <span>|</span>
                    <span>中文(简体)</span>
                </div>

            </div>
            <div :class="tabs?'layoutCard1':'layoutCard2'">
                <div id="warp">
                    <img src="image/二维码.png" alt="">
                </div>
                <div id="tabs">
                    <div id="tablist">
                        <span @click="checkTabs" :class="[tabs?'':'checkTabs']">登录</span> 
                        <span @click="checkTabs" :class="[tabs?'checkTabs':'']">注册</span> 
                        <div :class="[tabs?'span1':'span2']"></div> 
                    </div>
                    
                </div>
                <div id="myform">
                    <span v-if="tabs" id="myinput">
                        <input type="text" placeholder="邮箱/手机号码/小米ID" v-model="account" @blur="checkAccount">
                        <span id="warn">{{error.account}}</span>
                        <input type="password" placeholder="密码" v-model="pwd" @blur="checkPwd">
                        <span id="warn">{{error.pwd}}</span>
                    </span>
                    <span v-else="" id="myinput">
                        国家/地区
                        <input type="text" placeholder="中国" disabled>
                        <span>+86</span><input type="text" placeholder="手机号" v-model="tel" @blur="checkTel">
                        <span id="warn">{{error.tel}}</span>
                        <input type="text" placeholder="请输入验证码" v-model="captcha" @blur="checkCaptcha">
                        <a href="#">发送验证码</a>
                        <span id="warn">{{error.captcha}}</span>
                    </span>
                    <span style="padding-top: 50px;">
                        <input type="checkbox" class="ant-checkbox-input" v-model="agree">
                        已阅读并同意小米帐号 
                        <a target="_blank" rel="noopener noreferrer" href="/about/protocol/agreement?_locale=zh_CN">用户协议</a> 
                        和 <a target="_blank" rel="noopener noreferrer" href="/about/protocol/privacy?_locale=zh_CN">隐私政策</a>
                    </span>

                    <button @click="login" v-if="tabs">登录</button>
                    <button @click="enroll" v-if="!tabs">注册</button>

                    <div v-if="tabs">
                        <a href="#">忘记密码?</a>
                        <a href="#">手机号登录</a>
                    </div>  
                    <div v-else="">
                        <a href="#">收不到验证码?</a>
                    </div>  
                </div>
                <div id="otherlogin">
                    <div class="otherlogin__title">其他方式登录</div>
                    <div id="loginlist">
                        <img src="image/支付宝.png">
                        <img src="image/微信.png">
                        <img src="image/QQ.png">
                        <img src="image/新浪.png">
                        <img src="image/品牌标识_苹果.png">
                    </div>
                </div>
                
            </div>
            <div class="mi-copyright">
                小米公司版权所有-京ICP备10046444-
                <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134" target="_blank" rel="noopener noreferrer">京公网安备11010802020134号</a>
                -京ICP证110507号
            </div>
        </div>
    </template>
</body>
<script>
    //验证手机号
    function checkTelephone(telephone) {
        var reg=/^[1][3,4,5,7,8][0-9]{9}$/;
        if (!reg.test(Number(telephone))) {
            return false;
        } else {
            return true;
        }
    }
    //应用实例
    const app = Vue.createApp({
        /* template:"<div>{{message}}</div>", */
        template: "#root",
        data() {
            return {
                
            }
        }
    })
    app.component('LeftContent', {
        template: '#leftContent',
    })
    app.component('RightContent', {
        template: '#rightContent',
        data(){
            return{
                tabs:true,
                account:'',
                pwd:'',
                agree:false,
                tel:'',
                captcha:'',
                error:[
                    {account:''},
                    {pwd:''},
                    {tel:''},
                    {captcha:''}
                ],
            }
        },
        methods:{
            //切换tab功能
            checkTabs(){
                this.tabs = !this.tabs
                this.agree = false
            },
            //验证登录时账号是否填写
            checkAccount(){
                if(this.account==''){
                    this.error.account = '请输入账号';
                }else{
                    this.error.account = ''
                }
            },
            //验证登录时密码是否填写
            checkPwd(){
                if(this.pwd==''){
                    this.error.pwd = '请输入登录密码';
                }else{
                    this.error.pwd = ''
                }
            },
            //用户点击登录进行验证
            login(){
                if(this.account!==''&&this.pwd!=='' &&this.agree){
                    console.log(this.account+""+this.pwd);
                }
                if(this.account==''){
                    this.error.account = '请输入账号';
                }
                if(this.pwd==''){
                    this.error.pwd = '请输入登录密码';
                }
                if(!this.agree){
                    alert('请勾选用户协议');
                }
            },
            //用户点击注册进行验证
            enroll(){
                if(this.tel!=='' &&this.agree && this.captcha!==''){
                    console.log(this.tel);
                }
                if(this.tel==''){
                    this.error.tel = '请输入账号';
                }
                if(this.captcha==''){
                    this.error.captcha = '请输入验证码';
                }
                if(!this.agree){
                    alert('请勾选用户协议');
                }
            },
            checkTel(){
                if(this.tel==''){
                    this.error.tel = '请输入手机号码';
                }else if(!checkTelephone(this.tel)){
                    this.error.tel = '手机号码格式错误';
                }else{
                    this.error.tel = ''
                }
            },
            checkCaptcha(){
                if(this.captcha==''){
                    this.error.captcha = '请输入验证码';
                }else{
                    this.error.captcha = ''
                }
            }
            
        }
    })
    app.mount("#app")
</script>

</html>